<template>
  <view v-if="list_tuijian_data && list_tuijian_data.length > 0" class="container d-shang-gao-20" >
    <!-- 左滚动按钮 -->
    <view class="scroll-btn scroll-btn-left" @click="scrollToPrev">
      <uv-icon name="arrow-left" color="#9e9e9e" size="28" @click="scrollToPrev"></uv-icon>
    </view>
    
    <!-- 滚动容器 -->
    <scroll-view class="scroll-view" scroll-x ref="scrollView" :scroll-left="scrollLeft" @scroll="onScroll">
      <view class="product-item d-you-20" :style="{ width: kuan_1 + 'px' }" v-for="(quan, index) in list_tuijian_data" :key="index">
        
        <view class=" d-beijing-baise d-yuanjiao-10 d-bianhua-10 d-tuijian-0">
            <view class="d-kuan d-xia-10">
                <view class=" d-buhuanhang">
                    <view class="d-gaokuang-40 d-kuanggao-40 d-yuanjiao-40 d-box" @click="go_quan(quan.quan_id)">
                        <image v-if="quan.quan_tubiao" :src="quan.quan_tubiao" mode="aspectFill" class="d-img-40 d-yuanjiao-50  d-img-anhei"></image>
                        <image v-else src="/static/assets/images/avatar.png" mode="aspectFill" class="d-img-40 d-yuanjiao-50  d-img-anhei"></image>
                    </view>
                    <view class="d-kuan d-zuo-10" @click="go_quan(quan.quan_id)">
                        <view class="d-wenzi-14 d-jiacu d-wenzi-hei">{{ quan.quan_ming }} </view>
                        <view class="d-wenzi-yanse-hui d-buhuanhang">
							<uv-icon name="file-text" color="#a8a8a8" size="18" :label="'主题：'+quan.quan_tieshu" labelSize="12px" class="d-you-10"></uv-icon>
							<uv-icon name="account-fill" color="#a8a8a8" size="18" labelSize="12px" :label="'成员：'+quan.quan_huiyuan"></uv-icon>
						</view>
                    </view>
                </view>

                
			</view>
            <uv-line color="#dddddd" class="d-xia-10 d-clear"></uv-line>
			<uv-list class="d-chaochu-1">
			    <uv-list-item v-for="(tie, index2) in quan.tie" :key="index2" ellipsis="1" :title="tie.tie_title" :clickable="true" @click="tiezi(tie.tie_id,tie.quan_id)"></uv-list-item>
			</uv-list>

            
        </view>
      </view>
    </scroll-view>
    
    <!-- 右滚动按钮 -->
    <view class="scroll-btn scroll-btn-right" @click="scrollToNext">
        <uv-icon name="arrow-right" color="#9e9e9e" size="28" @click="scrollToNext"></uv-icon>
    </view>
  </view>
</template>


<script>
import QuanApi from '@/utils/quan_api.js';

import { getRequest,postRequest } from '@/utils/wxRequest.js';
export default {
    props: {
        kuan: {
            type: Number,
            default: 0
        }
    },
  data() {
    return {
      productList: [
        // 商品数据
      ],
      scrollLeft: 0,
      scrollAnimation: false,
      kuan_1: 0,
      list_tuijian_data: [],
    };
  },
  watch: {
    kuan: {
        handler(newValue) {
            // 检查屏幕宽度，如果小于500px，则设置kuan_1为250px
            if (this.$store && this.$store.state && this.$store.state.kuan && this.$store.state.kuan.windowWidth < 500) {
                this.kuan_1 = 250;
            } else {
                // 否则将kuan_1设置为kuan宽度的60%
                //this.kuan_1 = newValue * 0.6;
                this.kuan_1 = 310;
            }
            // 计算总宽度，确保内部内容足够宽以触发滚动
            this.totalWidth = this.kuan_1 * 3 + 40; // 3个元素加上边距
        },
        immediate: true
    }
},
  mounted() {
    this.productList = [
      { name: '商品1', price: 10, image: '商品1图片链接' },
      { name: '商品2', price: 20, image: '商品2图片链接' },
      { name: '商品3', price: 30, image: '商品3图片链接' },
	  { name: '商品4', price: 40, image: '商品4图片链接' },
    ];
    
    // 调用获取推荐圈子数据的方法
    this.get_tuijian_api();
  },
  methods: {
    scrollToNext() {
      // 直接更新状态值，不依赖于当前元素位置
      this.scrollLeft += 320;
    },
    scrollToPrev() {
      // 直接更新状态值，不依赖于当前元素位置
      this.scrollLeft -= 320;
      // 确保不会滚动到负数位置
      this.scrollLeft = Math.max(0, this.scrollLeft);
    },
    onScroll(e) {
      // 监听滚动事件，同步状态值
      // 避免直接设置，防止循环更新
      if (Math.abs(this.scrollLeft - e.detail.scrollLeft) > 5) {
        this.scrollLeft = e.detail.scrollLeft;
      }
    },
    //推荐圈子
    get_tuijian_api(){
    	var get_data = getRequest(QuanApi.get_tuijian_quan());
    	var res;
    	get_data.then(duixin_data => {
    		res = duixin_data;
    		if(res.data.code) {
    			this.list_tuijian_data = res.data.data && res.data.data.list;
            
    		}
    	})
    },
    go_quan(id){
    	uni.navigateTo({
    		url: '/pages/quanzi/index?id='+id,
    		fail: (err) => {
    		  console.error('跳转失败:', err)
    		}
    	})
    },
    //帖子
    tiezi(id,cid){
		console.log(id);	
		try {
		  uni.navigateTo({
		    url: '/pages/tiezi/index?id='+id+'&cid='+cid,
		    fail: (err) => {
		      console.error('跳转失败:', err)
		    }
		  })
		} catch (e) {
		  console.error('跳转异常:', e)
		}
	},
  },

};
</script>

<style scoped>
.container {
  width: 100%;
  height: 250px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
}

.scroll-view {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: default;
  scroll-behavior: smooth;
  flex: 1;
  height: 100%;
}

/* 自定义滚动条样式 - Webkit浏览器 */
.scroll-view {
  overflow-x: auto;
  overflow-y: hidden;
  /* 以下是关键的滚动条样式设置 */
  scrollbar-width: thin;
  scrollbar-color: #f3f4f7 #f3f4f7;
}

/* 针对Webkit浏览器的滚动条样式 */
/* 使用容器包裹的方式避免样式冲突 */
.container ::-webkit-scrollbar {
  width: 1px;
  height: 1px;
  display: block;
}

.container ::-webkit-scrollbar-track {
  background: #f3f4f7;
}

.container ::-webkit-scrollbar-thumb {
  background: #f3f4f7;
  border-radius: 1px;
}

/* 确保滚动按钮的交互不受影响 */
.scroll-btn {
  z-index: 99000 !important;
  pointer-events: auto !important;
}

/* 滚动按钮样式 */
.scroll-btn {
  position: absolute;
  width: 30px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.scroll-btn:hover {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.scroll-btn-left {
  left: -5px;
  
}

.scroll-btn-right {
  right: -5px;
  
}

.product-item {
  display: inline-block;
  /*width: 150px;*/
  height: 250px;
  
  background-color: #ffffff;
  border-radius: 10px;
 /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  background-color: #f0f0f0;
}

.product-info {
 /* padding: 8px;*/
}

.product-name {
  font-size: 14px;
  color: #333333;
  line-height: 1.4;
  margin-bottom: 4px;
}

.product-price {
  font-size: 16px;
  color: #ff0000;
}
.d-shang-gao-20 {
    margin-top: 40rpx;
}
/* 响应式样式：当屏幕宽度小于1220px时 */
@media screen and (max-width: 1220px) {
    .d-you-20 {
        margin-right: 20rpx;
    }
    .d-shang-gao-20 {
        margin-top: 20rpx;
    }
}
@media screen and (max-width: 500px) {
    /* 隐藏左右滚动按钮 */
    .scroll-btn-left,
    .scroll-btn-right {
        display: none;
    }
}

</style>
